<template>
	<view v-if="data">
		<!-- 公共栏 -->
		<uni-notice-bar
			style="margin: 0;"
			showIcon
			single
			scrollable
			:speed="50"
			:text="msg"
		></uni-notice-bar>
		<!-- 轮播图 -->
		<!-- 轮播图自定义指示点 -->
		<uni-swiper-dot
			:info="carouselItems"
			:current="current"
			field="title"
			mode="nav"
		>
			<!-- 图片比例 1000x400  宽750rpx  高300rpx-->
			<swiper
				:autoplay="true"
				:interval="3000"
				:duration="250"
				circular
				@change="doChanged"
			>
				<swiper-item
					v-for="(item, index) in carouselItems" :key="index"
					@click="goDetail(item.href, item.title)"
				>
					<image
						style="width: 100%;height: 100%;"
						:src="'http://www.codeboy.com:9999/' + item.img"
						mode=""
					></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 循环多个分类 -->
		<view v-for="(value, key) in items" :key="key">
			<!-- 商品分类 -->
			<view>
				<view class="header">
					<uni-icons type="shop"></uni-icons>
					<text>{{ value.title }}</text>
				</view>
				<!-- 宫格布局 商品列表 -->
				<uni-grid
					:column="2"
					:square="false"
					:showBorder="false"
					:highlight="false"
				>
					<!-- <uni-grid-item
						v-for="(item, index) in recommendedItems"
						:key="index"
					> -->
					<uni-grid-item
						v-for="(item, index) in value.data"
						:key="index"
					>
						<view class="item">
							<image :src="baseURL + item.pic" mode=""></image>
							<view>
								<view>{{ item.title }}</view>
								<view>{{ item.details }}</view>
								<view>¥{{ item.price }}</view>
								<button
									type="primary"
									size="mini"
									@click="goDetail(item.href, item.title)"
								>
									查看详情
								</button>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<!-- 底部图标 -->
		<uni-grid :column="4" :showBorder="false" :highlight="false">
			<uni-grid-item v-for="(item, index) in 4" :key="index">
				<!-- 包裹一下 方便调整 -->
				<view
					style="display: flex;align-items: center;justify-content: center;height: 100%;"
				>
					<image
						style="width: 100rpx;height: 100rpx;"
						:src="`/static/icons/icon${item}.png`"
						mode=""
					></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;height: 100%;">
					品质保证
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 回到顶部 -->
		<view
			v-show="showGoTop"
			class="btn-gotop"
			hover-class="active"
			@click="doGoTop"
		>
			<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 首页接口数据
			data: null,
			// 通告栏信息
			msg: '热烈庆祝 学子商城App 成功制作，希望同学们能够独立完成此作品!',
			//当前选中轮播
			current: 0,
			// 基础URL
			baseURL: 'http://www.codeboy.com:9999/',
			// 是否显示回到顶部
			showGoTop: false
		};
	},
	mounted() {
		this.getData();
	},
	// 监听页面滚动
	onPageScroll(e) {
		this.showGoTop = e.scrollTop > 2000;
	},
	methods: {
		// 回到顶部
		doGoTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		// 跳转详情页
		goDetail(href, title) {
			uni.navigateTo({
				url: `/pages/details/details?href=${href}&title=${title}`
			});
		},
		// 监听轮播滚动到第几张
		doChanged(e) {
			// console.log(e);
			this.current = e.detail.current;
		},
		getData() {
			const url = 'http://www.codeboy.com:9999/data/product/index.php';
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.data = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		// 轮播图片
		carouselItems() {
			return this.data.carouselItems;
		},
		// 首页推荐
		// recommendedItems() {
		// 	return this.data.recommendedItems;
		// }
		// 经过观察发现，页面UI是一样的，数据不同而已
		// 返回值数据组织成一个数组
		items() {
			return [
				{ title: '1F/首页推荐', data: this.data.recommendedItems },
				{ title: '2F/热销单品', data: this.data.topSaleItems },
				{ title: '3F/最新上架', data: this.data.newArrivalItems }
			];
		}
	}
};
</script>

<style scoped lang="scss">
// 推荐头部
.header {
	padding: 15rpx;
	background-color: #eee;
	text {
		margin-left: 10rpx;
	}
}
// 每个商品
.item {
	margin: 6rpx;
	border: 1px solid #888;
	border-radius: 6rpx;
	> image {
		width: 100%;
		height: 280rpx;
	}
	> view {
		padding: 10rpx;
		view {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&:first-child {
				font-weight: bold;
			}
			&:nth-child(2) {
				font-size: 0.8em;
				color: gray;
				margin: 4rpx 0;
			}
			&:nth-child(3) {
				color: red;
				font-size: 1.1em;
			}
		}
	}
}
// 回到顶部
.btn-gotop {
	position: fixed;
	right: 40rpx;
	bottom: 150rpx;

	width: 100rpx;
	height: 100rpx;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	border: 1px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.active {
	opacity: 0.6;
}
</style>